<template>
  <el-dialog
    v-model="visible"
    :title="$t('product.relatedItems')"
    :before-close="closeDialog"
  >
    <div class="btn-row">
      <div
        class="default-btn primary-btn"
        @click="selectSingleProds()"
      >
        {{
          $t("product.chooSingPro")
        }}
      </div>
    </div>
    <el-table
      :data="retailProdTable"
      header-cell-class-name="table-header"
      row-class-name="table-row"
      style="width: 100%"
    >
      <el-table-column
        prop="name"
        :label="$t('product.itemName')"
        width="180"
      />
      <el-table-column
        prop="spec"
        :label="$t('product.singleProdSpe')"
        width="180"
      >
        <template #default="scope">
          {{ scope.row.spec ? scope.row.spec : '-' }}
        </template>
      </el-table-column>
      <el-table-column
        prop="retailNums"
        width="200"
        :label="$t('product.quantityInCom')"
      >
        <template #default="scope">
          <el-input-number
            v-model="scope.row.retailNums"
            controls-position="right"
            :precision="0"
            :min="0"
            @change="countTotal(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="costPrice"
        :label="$t('product.singleProd')"
      />
      <el-table-column
        prop="total"
        :label="$t('product.total')"
      />
      <el-table-column
        prop="stocks"
        :label="$t('product.singleProdInve')"
      />
    </el-table>
    <template #footer>
      <div class="dialog-footer">
        <div
          class="default-btn"
          @click="closeDialog"
        >
          {{
            $t("crud.filter.cancelBtn")
          }}
        </div>
        <div
          class="default-btn primary-btn"
          @click="confirm"
        >
          {{ $t("crud.filter.submitBtn") }}
        </div>
      </div>
    </template>
    <!-- 单品选择弹窗  测试完之后添加这个链接  dataUrl='/group/prod/getNotGroupProdPage'-->
    <SingleProdsSelect
      v-if="sprodVisible"
      ref="singleProdsSelectRef"
      @refresh-select-single-prods="getRetailTable"
    />
  </el-dialog>
</template>

<script setup>
import Big from 'big.js'
import { ElMessage } from 'element-plus'
import SingleProdsSelect from '@/components/single-prods-select/index.vue'
const emit = defineEmits(['refreshSelectSingleProds'])

let rowOriData = null
let oriIndex = null
const visible = ref(false)
const retailProdTable = ref([])
const init = (row, index) => {
  visible.value = true
  rowOriData = row
  oriIndex = index
  retailProdTable.value = row.skuSingleProds
}
const getRetailTable = (prods) => {
  if (prods) {
    prods.forEach(item => {
      const total = new Big(item.costPrice)
      item.total = total.times(item.retailNums).toFixed(2)
    })
    retailProdTable.value = prods
  }
}
const sprodVisible = ref(false)
const singleProdsSelectRef = ref(null)
const selectSingleProds = () => {
  sprodVisible.value = true
  nextTick(() => {
    singleProdsSelectRef.value.init(retailProdTable.value)
  })
}
const countTotal = (rowData) => {
  const total = new Big(rowData.costPrice)
  if (!/^[0-9]\d*$/.test(rowData.retailNums)) {
    ElMessage.error($t('retailProd.tipError'))
    return
  }
  rowData.retailNums = parseInt(rowData.retailNums)
  rowData.total = total.times(rowData.retailNums).toFixed(2)
}
// 关闭弹窗
const closeDialog = () => {
  visible.value = false
  retailProdTable.value = []
}
const confirm = () => {
  if (retailProdTable.value === null || retailProdTable.value === undefined || retailProdTable.value.length <= 0) {
    return ElMessage.error($t('retailProd.tip2Error'))
  }
  for (let i = 0; i < retailProdTable.value.length; i++) {
    if (!/^[1-9]\d*$/.test(retailProdTable.value[i].retailNums)) {
      return ElMessage.error(`[${retailProdTable.value[i].name}]` + $t('retailProd.tip3Error'))
    }
  }
  rowOriData.skuSingleProds = retailProdTable.value
  emit('refreshSelectSingleProds', rowOriData, oriIndex)
  visible.value = false
}
defineExpose({ init })
</script>
<style lang="scss" scoped>
.btn-row {
  margin-bottom: 15px;
}
</style>
